<template>
  <router-view v-if="route.matched.length === 3" />
  <a-space v-else direction="vertical" :size="24" style="width: 100%">
    <e-container :loading="configurationItemsLoading" v-permission="'Configuration:ConfigurationItem:Query'">
      <a-space>
        <e-title title="Configuration Item" />
        <a-divider type="vertical" />
        <a-button
          v-permission="'Configuration:ConfigurationItem:Edit'"
          type="link"
          size="small"
          @click="() => (showConfigurationItemsModal = true)"
        >
          <a-space>
            <e-icon type="edit" />
            Edit
          </a-space>
        </a-button>
      </a-space>
      <div class="table">
        <a-row>
          <a-col :span="4" class="cell field">Configuration Item</a-col>
          <a-col :span="20" class="cell value" style="line-height: 32px">
            <a-tag v-for="item in configurationItems" :key="item.Value">
              <a-space>
                {{ item.Text }}<span v-if="item.Text !== item.NameEN" style="color: #bfbfbf"> {{ item.NameEN }} </span>
              </a-space>
            </a-tag>
          </a-col>
        </a-row>
      </div>
      <a-modal
        v-model:visible="showConfigurationItemsModal"
        width="888px"
        title="Edit Configuration Item"
        wrap-class-name="primary-modal"
        ok-text="Save"
        @cancel="showConfigurationItemsModal = false"
      >
        <a-form layout="vertical">
          <a-form-item label="Configuration Item" name="configurationItemsTemp">
            <a-select
              v-model:value="configurationItemsTemp"
              mode="multiple"
              option-filter-prop="label"
              placeholder="Please select"
            >
              <a-select-option v-for="item in dict.hrOrg" :key="item.value" :label="item.text + item.nameEN">
                <a-space>
                  {{ item.text }}
                  <span v-if="item.text !== item.nameEN" style="color: #bfbfbf"> {{ item.nameEN }} </span>
                </a-space>
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
        <template #footer>
          <a-button key="back" @click="showConfigurationItemsModal = false">Cancel</a-button>
          <a-button
            key="submit"
            v-permission="'Configuration:ConfigurationItem:Edit'"
            type="primary"
            @click="handleSaveConfigurationItems"
            >Save</a-button
          >
        </template>
      </a-modal>
    </e-container>
    <e-container :loading="blacklistLoading" v-permission="'Configuartion:Blacklist:Query'">
      <div style="display: flex; justify-content: space-between">
        <a-space>
          <e-title title="Blacklisted" />
          <a-divider type="vertical" />
          <a-tag v-if="blacklisted" color="red">Yes</a-tag>
          <a-tag v-else color="green">No</a-tag>
        </a-space>
        <a-space>
          <a-button v-permission="'Configuartion:Blacklist:Edit'" size="small" danger @click="handleBlacklistChange">
            Add Client To Blacklist
          </a-button>
          <a-button size="small" @click="router.push({ name: 'Blacklist History', params: { id: id } })">
            Operation History
          </a-button>
        </a-space>
      </div>
      <a-divider />
      <a-table :columns="blacklistTableColumns" :data-source="blacklistedReasonList" :pagination="false">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'blackListTypeName'">
            <a-space>
              {{ record.blackListTypeName }}
              <a-tag v-if="record.blackListType === 3" color="orange">Baned By System</a-tag>
            </a-space>
          </template>
          <template v-if="column.key === 'deleted'">
            <a-tag v-if="!record.deleted" color="red">In Effect</a-tag>
            <a-tag v-else>Revoked</a-tag>
          </template>
          <template v-if="column.key === 'opt'">
            <a-button
              v-if="!record.deleted && record.blackListType !== 3"
              v-permission="'Configuartion:Blacklist:Edit'"
              type="link"
              style="color: #389e0d"
              @click="revokeBlacklistRecord(record.id)"
            >
              <a-space>
                <e-icon type="reduce" />
                Revoke
              </a-space>
            </a-button>
            <a-tooltip v-if="!record.deleted && record.blackListType === 3" title="Baned by system can't be revoked">
              <a-button v-permission="'Configuartion:Blacklist:Edit'" type="link" disabled style="color: #818d9f">
                <a-space>
                  <e-icon type="reduce" />
                  Revoke
                </a-space>
              </a-button>
            </a-tooltip>
          </template>
        </template>
        <template #emptyText> <e-empty centered :size="150" :height="150" /> </template>
      </a-table>
      <a-modal
        v-model:visible="showBlacklistReasonModal"
        width="888px"
        :title="blacklistModel.action === 'add' ? 'Add to blacklist' : 'Revoke'"
        wrap-class-name="primary-modal"
        ok-text="Save"
      >
        <a-form ref="blacklistFrom" layout="vertical" :rules="rules" :model="blacklistModel">
          <a-form-item label="Reason" name="blacklistOperateReason">
            <a-textarea v-model:value="blacklistModel.blacklistOperateReason" :auto-size="{ minRows: 4, maxRows: 4 }" />
          </a-form-item>
        </a-form>
        <template #footer>
          <a-button key="back" @click="showBlacklistReasonModal = false">Cancel</a-button>
          <a-button
            key="submit"
            v-permission="'Configuartion:Blacklist:Edit'"
            type="primary"
            @click="blacklistModel.action === 'add' ? addClientToBlacklist() : doRevokeBlacklistRecord()"
          >
            {{ blacklistModel.action === 'add' ? 'Add' : 'Revoke' }}
          </a-button>
        </template>
      </a-modal>
    </e-container>
    <e-container :loading="useAllowDownloadInvoiceFileLoading" v-permission="'Configuration:DownloadInvoice:Query'">
      <div style="display: flex; justify-content: space-between">
        <a-space>
          <e-title title="Allow Download Invoice File" />
          <a-divider type="vertical" />
          <a-switch
            :checked="useAllowDownloadInvoiceFileEnabled"
            :disabled="!isDownloadInvoiceEdit"
            checked-children="On"
            un-checked-children="Off"
            @change="handleChangeAllowDownloadInvoiceFile"
          />
        </a-space>
      </div>
    </e-container>
    <e-container :loading="satisfactionSurveyLoading" v-permission="'Configuration:SatisfactionSurvey:Query'">
      <a-space>
        <e-title title="Satisfaction Survey Switch" />
        <a-divider type="vertical" />
        <a-switch
          :disabled="!isSatisfactionEdit || !isECI || basicInfo.raw.value.businessDirection === 2"
          :checked="satisfactionSurveyEnabled"
          checked-children="On"
          un-checked-children="Off"
          @change="handleChangeSatisfactionSurvey(false)"
        />
      </a-space>
      <div v-if="satisfactionSurveyEnabled" class="table">
        <a-row>
          <a-col :span="4" class="cell field">Frequency</a-col>
          <a-col :span="20" class="cell value">
            <a-tag>
              <a-space>
                {{ satisfactionSurveyMonth }} month
                <e-icon
                  v-permission="'Configuration:SatisfactionSurvey:Edit'"
                  type="edit"
                  @click="showSatisfactionSurveyMonthDialog = true"
                />
              </a-space>
            </a-tag>
          </a-col>
        </a-row>
      </div>
      <a-modal
        v-model:visible="showSatisfactionSurveyMonthDialog"
        width="888px"
        title="Edit Frequency"
        wrap-class-name="primary-modal"
        ok-text="Save"
        @cancel="showSatisfactionSurveyMonthDialog = false"
        @ok="handleChangeSatisfactionSurvey(true)"
      >
        <a-form layout="vertical">
          <a-form-item label="Month" name="satisfactionSurveyMonth">
            <a-input-number v-model:value="satisfactionSurveyMonthTemp" style="width: 100%" :min="1" :max="12" />
          </a-form-item>
        </a-form>
        <template #footer>
          <a-button key="back" @click="showSatisfactionSurveyMonthDialog = false">Cancel</a-button>
          <a-button
            key="submit"
            v-permission="'Configuration:SatisfactionSurvey:Edit'"
            type="primary"
            @click="handleChangeSatisfactionSurvey(true)"
            >Save</a-button
          >
        </template>
      </a-modal>
    </e-container>
    <e-container :loading="accountManagerLoading" v-permission="'Configuration:AM:Query'">
      <a-space>
        <e-title title="Account Manager" />
        <a-divider type="vertical" />
        <a-select
          v-permission="'Configuration:AM:Edit'"
          v-model:value="accountManagerCandidatesChoose"
          style="width: 360px"
          show-search
          option-filter-prop="label"
          :get-popup-container="triggerNode => triggerNode.parentNode"
          placeholder="Search and Add"
        >
          <a-select-option
            v-for="item in accountManagerCandidates"
            :key="item.value"
            :label="item.text"
            :disabled="accountManagers.findIndex(am => am.id === item.value) > -1"
          >
            {{ item.text }}
          </a-select-option>
        </a-select>
      </a-space>
      <a-divider />
      <a-list v-if="accountManagers.length > 0" :data-source="accountManagers" :grid="{ gutter: 16, column: 2 }">
        <template #renderItem="{ item }">
          <a-list-item>
            <div class="person-item">
              <div class="name">
                <div class="square">
                  {{ item.shortOrgName ? item.shortOrgName : '&nbsp;' }}
                </div>
                <span>{{ item.englishName }}[{{ item.chineseName }}]</span>
              </div>
              <div class="operations">
                <e-icon
                  v-permission="'Configuration:AM:Edit'"
                  type="delete"
                  hover-color="#3c6cfe"
                  style="cursor: pointer"
                  @click="handleDeleteAccountManager(item.id)"
                />
              </div>
            </div>
          </a-list-item>
        </template>
      </a-list>
      <e-empty v-else centered :size="150" :height="150" />
    </e-container>
    <e-container :loading="projectManagerLoading" v-permission="'Configuration:PM:Query'">
      <a-space>
        <e-title title="Project Manager" />
        <a-divider type="vertical" />
        <a-select
          v-permission="'Configuration:PM:Edit'"
          v-model:value="projectManagerCandidatesChoose"
          style="width: 360px"
          show-search
          option-filter-prop="label"
          :get-popup-container="triggerNode => triggerNode.parentNode"
          :placeholder="addOperateBUTips ? 'Please select Operate BU in Basic Information' : 'Search and Add'"
        >
          <a-select-option
            v-for="item in projectManagerCandidates"
            :key="item.value"
            :label="item.text"
            :disabled="projectManagers.findIndex(pm => pm.id === item.value) > -1"
          >
            {{ item.text }}
          </a-select-option>
        </a-select>
      </a-space>
      <a-divider />
      <a-list v-if="projectManagers.length > 0" :data-source="projectManagers" :grid="{ gutter: 16, column: 2 }">
        <template #renderItem="{ item }">
          <a-list-item>
            <div class="person-item">
              <div class="name">
                <div class="square">
                  {{ item.shortOrgName ? item.shortOrgName : '&nbsp;' }}
                </div>
                <span>{{ item.englishName }}[{{ item.chineseName }}]</span>
              </div>
              <div class="operations">
                <!--
                <a-radio :checked="item.isPrincipal" @change="handleSetPrincipal(item.id)">Principal</a-radio>
                -->
                <e-icon
                  v-permission="'Configuration:PM:Edit'"
                  type="delete"
                  hover-color="#3c6cfe"
                  style="cursor: pointer; vertical-align: text-bottom"
                  @click="handleDeleteProjectManager(item.id)"
                />
              </div>
            </div>
          </a-list-item>
        </template>
      </a-list>
      <e-empty v-else centered :size="150" :height="150" />
    </e-container>
    <e-container v-permission="'Configuration:SalesPerson:Query'">
      <a-spin :spinning="salesTableLoading">
        <a-space>
          <e-title title="Sales Personnel" />
          <a-divider type="vertical" />
          <a-button
            v-permission="'Configuration:SalesPerson:Edit'"
            type="link"
            size="small"
            @click="handleClickAddSales"
          >
            <a-space>
              <e-icon type="add" />
              Add
            </a-space>
          </a-button>
        </a-space>
        <a-divider />
        <a-table :columns="salesPersonTableColumns" :data-source="salesList" :pagination="false">
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'opt'">
              <a-button
                v-permission="'Configuration:SalesPerson:Edit'"
                type="link"
                size="small"
                @click="handleEditSalesPerson(record)"
              >
                <a-space>
                  <e-icon type="edit" line-height="22px" />
                  Edit
                </a-space>
              </a-button>
              <a-button
                v-permission="'Configuration:SalesPerson:Edit'"
                type="link"
                style="color: #fc4b3b"
                size="small"
                @click="handleDeleteSalesPerson(record.id)"
              >
                <a-space>
                  <e-icon type="delete" line-height="22px" />
                  Delete
                </a-space>
              </a-button>
            </template>
          </template>
          <template #emptyText> <e-empty centered :size="150" :height="150" /> </template>
        </a-table>
      </a-spin>
      <a-modal
        v-model:visible="showSalesPersonModal"
        width="888px"
        title="Add Sales Personnel"
        wrap-class-name="primary-modal"
        ok-text="Save"
        @ok="handleSaveSalesPerson"
      >
        <div style="overflow-x: hidden">
          <a-form ref="salesPersonFormRef" layout="vertical" :rules="salesPersonFormRules" :model="salesPersonForm">
            <a-row :gutter="[120, 0]">
              <a-col :span="12">
                <a-form-item label="Sales Personnel" name="personId">
                  <a-select
                    v-model:value="salesPersonForm.personId"
                    option-filter-prop="label"
                    show-search
                    :disabled="salesPersonAction === 'edit'"
                    placeholder="Please select"
                  >
                    <a-select-option
                      v-for="item in salesCandidateList"
                      :key="item.value"
                      :label="item.text"
                      :disabled="salesList.findIndex(sales => sales.personId === item.value) > -1"
                    >
                      {{ item.text }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="[120, 0]">
              <a-col :span="12">
                <a-form-item label="Revenue Split (%)" name="percentage">
                  <a-input-number
                    v-model:value="salesPersonForm.percentage"
                    style="width: 100%"
                    :min="0"
                    :max="100"
                    :parser="value => Math.floor(value)"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="Takeover Date" name="date">
                  <a-date-picker
                    v-model:value="salesPersonForm.date"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    style="width: 100%"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <template #footer>
          <a-button key="back" @click="showSalesPersonModal = false">Cancel</a-button>
          <a-button
            key="submit"
            v-permission="'Configuration:SalesPerson:Edit'"
            type="primary"
            @click="handleSaveSalesPerson"
            >Save</a-button
          >
        </template>
      </a-modal>
    </e-container>
    <e-container v-permission="'Configuration:BeginCooperate:Query'">
      <a-spin :spinning="beginCooperateLoading">
        <a-space>
          <e-title title="Begin Cooperate" />
          <a-divider type="vertical" />
          <a-button
            v-permission="'Configuration:BeginCooperate:Edit'"
            type="link"
            size="small"
            @click="handleBeginCooperateRestart"
          >
            <a-space>
              <e-icon type="restart" />
              Renew
            </a-space>
          </a-button>
        </a-space>
        <a-divider />
        <div class="table" style="margin-bottom: 24px">
          <a-row>
            <a-col :span="4" class="cell field">Begin Cooperate</a-col>
            <a-col :span="20" class="cell value">{{ beginCooperateInfo.beginCooperate ?? '--' }}</a-col>
          </a-row>
        </div>
        <a-table :columns="beginCooperateColumns" :data-source="beginCooperateOperateRecords" :pagination="false">
          <template #emptyText> <e-empty centered :size="150" :height="150" /> </template>
        </a-table>
      </a-spin>
      <a-modal
        v-model:visible="showBeginCooperateModal"
        width="888px"
        title="Set Payment Date"
        wrap-class-name="primary-modal"
        ok-text="Save"
        @ok="handleSaveBeginCooperate"
      >
        <div style="overflow-x: hidden">
          <a-form
            ref="beginCooperateFormRef"
            layout="vertical"
            :rules="beginCooperateRules"
            :model="beginCooperateForm"
          >
            <a-row :gutter="[120, 0]">
              <a-col :span="12">
                <a-form-item label=" " name="type">
                  <a-radio-group v-model:value="beginCooperateForm.type">
                    <a-radio :value="1">Automatic Setting</a-radio>
                    <a-radio :value="2">Manual Setting</a-radio>
                  </a-radio-group>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="Begin Cooperate" name="date">
                  <a-date-picker
                    v-model:value="beginCooperateForm.date"
                    :disabled="beginCooperateForm.type === 1"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    style="width: 100%"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="[120, 0]">
              <a-col :span="12" style="color: #6b798e">
                Earliest Expected Payment Date:
                {{ beginCooperateInfo.realPaymentDate ? beginCooperateInfo.realPaymentDate : '--' }}
              </a-col>
            </a-row>
            <a-row :gutter="[120, 0]" style="margin-top: 24px">
              <a-col :span="24">
                <a-form-item label="Reason" name="reason">
                  <a-textarea
                    v-model:value="beginCooperateForm.reason"
                    placeholder="Please input reason"
                    :maxlength="50"
                    show-count
                    :rows="4"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <template #footer>
          <a-button key="back" @click="showBeginCooperateModal = false">Cancel</a-button>
          <a-button
            key="submit"
            v-permission="'Configuration:BeginCooperate:Edit'"
            type="primary"
            @click="handleSaveBeginCooperate"
            >Save</a-button
          >
        </template>
      </a-modal>
    </e-container>
    <e-container v-if="!isECI" v-permission="'Configuration:WiitransAccount:Query'">
      <a-space>
        <e-title title="Wiitrans Client Account" />
        <a-divider type="vertical" />
        <a-button
          v-permission="'Configuration:WiitransAccount:Edit'"
          type="link"
          size="small"
          @click="handleEditWiitransAccount"
        >
          <a-space>
            <e-icon type="edit" />
            Edit
          </a-space>
        </a-button>
      </a-space>
      <a-divider />
      <a-spin :spinning="wiitransAccountLoading">
        <div class="table">
          <a-row>
            <a-col :span="4" class="cell field">Wiitrans Account</a-col>
            <a-col :span="20" class="cell value">{{ wiitransAccount.account }}</a-col>
          </a-row>
        </div>
      </a-spin>
      <a-modal
        v-model:visible="showWiitransAccountModal"
        width="888px"
        title="Set Wiitrans Account"
        wrap-class-name="primary-modal"
        ok-text="Save"
        @ok="handleSaveWiitransAccount"
      >
        <div style="overflow-x: hidden">
          <a-form
            ref="wiitransAccountFormRef"
            layout="vertical"
            :rules="wiitransAccountRules"
            :model="wiitransAccountForm"
          >
            <a-row :gutter="[120, 0]">
              <a-col :span="24">
                <a-form-item label="Wiitrans Account" name="account">
                  <a-input type="text" v-model:value="wiitransAccountForm.account" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <template #footer>
          <a-button key="back" @click="showWiitransAccountModal = false">Cancel</a-button>
          <a-button
            key="submit"
            v-permission="'Configuration:WiitransAccount:Edit'"
            type="primary"
            @click="handleSaveWiitransAccount"
            >Save</a-button
          >
        </template>
      </a-modal>
    </e-container>
  </a-space>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import EContainer from '@/components/EContainer.vue'
import ETitle from '@/components/ETitle.vue'
import EIcon from '@/components/EIcon.vue'
import EEmpty from '@/components/EEmpty.vue'
import { useConfigurationItems } from './configuration/useConfigurationItems.js'
import { useDict } from '@/hooks/useDict.js'
import { useBlacklist } from '@/pages/Client/configuration/useBlacklist.js'
import { useSatisfactionSurvey } from '@/pages/Client/configuration/useSatisfactionSurvey.js'
import { useAccountManager } from '@/pages/Client/configuration/useAccountManager.js'
import { useProjectManager } from '@/pages/Client/configuration/useProjectManager.js'
import { useSalesPerson } from '@/pages/Client/configuration/useSalesPerson.js'
import { useBeginCooperate } from '@/pages/Client/configuration/useBeginCooperate.js'
import { useBasicInfo } from '@/pages/Client/hooks/useBasicInfo.js'
import store from '@/store'
import { useWiitransAccount } from '@/pages/Client/configuration/useWiitransAccount.js'
import { useAllowDownloadInvoiceFile } from '@/pages/Client/configuration/useAllowDownloadInvoiceFile.js'
const route = useRoute()
const router = useRouter()
const id = parseInt(route.params.id)
const dict = useDict()
const { basicInfo } = useBasicInfo(id)
// const briefInfo = computed(() => store.state.client.briefInfo)
const permissions = computed(() => store.state.client.permissions)
const isBlackListEdit = ref(false)
const isDownloadInvoiceEdit = ref(false)
const isSatisfactionEdit = ref(false)
permissions.value.forEach(item => {
  if (item.auth === 'Configuartion:Blacklist:Edit') {
    isBlackListEdit.value = true
  }
  if (item.auth === 'Configuration:DownloadInvoice:Edit') {
    isDownloadInvoiceEdit.value = true
  }
  if (item.auth === 'Configuration:SatisfactionSurvey:Edit') {
    isSatisfactionEdit.value = true
  }
})
const isECI = computed(() => basicInfo.raw.value.fromGrade === 10)
const {
  showConfigurationItemsModal,
  configurationItems,
  configurationItemsLoading,
  configurationItemsTemp,
  handleSaveConfigurationItems,
  loadConfigurationItems
} = useConfigurationItems(id)
const blacklistFrom = ref(null)
const {
  blacklisted,
  blacklistedReasonList,
  blacklistTableColumns,
  showBlacklistReasonModal,
  rules,
  revokeBlacklistRecord,
  doRevokeBlacklistRecord,
  blacklistModel,
  blacklistLoading,
  handleBlacklistChange,
  addClientToBlacklist
} = useBlacklist(id, blacklistFrom)

const { useAllowDownloadInvoiceFileLoading, useAllowDownloadInvoiceFileEnabled, handleChangeAllowDownloadInvoiceFile } =
  useAllowDownloadInvoiceFile(id)

const {
  satisfactionSurveyEnabled,
  satisfactionSurveyMonth,
  satisfactionSurveyMonthTemp,
  showSatisfactionSurveyMonthDialog,
  satisfactionSurveyLoading,
  handleChangeSatisfactionSurvey
} = useSatisfactionSurvey(id)

const {
  accountManagerCandidates,
  accountManagerCandidatesChoose,
  accountManagers,
  accountManagerLoading,
  handleDeleteAccountManager
} = useAccountManager(id)

// 注入loadConfigurationItems方法，设置PM的同时更新下ConfigurationItems的数据
const {
  projectManagerCandidates,
  projectManagerCandidatesChoose,
  projectManagers,
  handleDeleteProjectManager,
  handleSetPrincipal,
  projectManagerLoading
} = useProjectManager(id, loadConfigurationItems)
// 提示添加Operate BU
const addOperateBUTips = computed(
  () => !!basicInfo.raw.value.operateBU && store.getters['user/isBUM'] && projectManagerCandidates.value.length === 0
)

const salesPersonFormRef = ref(null)
const {
  salesPersonTableColumns,
  salesTableLoading,
  salesPersonAction,
  showSalesPersonModal,
  salesList,
  salesCandidateList,
  salesPersonForm,
  salesPersonFormRules,
  handleClickAddSales,
  handleSaveSalesPerson,
  handleEditSalesPerson,
  handleDeleteSalesPerson
} = useSalesPerson(id, salesPersonFormRef)

const beginCooperateFormRef = ref(null)
const {
  beginCooperateInfo,
  beginCooperateLoading,
  showBeginCooperateModal,
  beginCooperateRules,
  beginCooperateForm,
  handleBeginCooperateRestart,
  handleSaveBeginCooperate,
  beginCooperateColumns,
  beginCooperateOperateRecords
} = useBeginCooperate(id, beginCooperateFormRef)

const wiitransAccountFormRef = ref(null)
const {
  wiitransAccount,
  wiitransAccountLoading,
  showWiitransAccountModal,
  wiitransAccountRules,
  wiitransAccountForm,
  handleEditWiitransAccount,
  handleSaveWiitransAccount
} = useWiitransAccount(id, wiitransAccountFormRef)
</script>

<style lang="less" scoped>
@import '@/assets/style/reset_table';
@border: 1px solid @lighter-gray;
.table {
  border: @border;
  margin-top: 24px;
  .cell {
    padding: 10px 14px;
    border-bottom: @border;
    border-right: @border;
    &:last-child {
      border-right: none;
    }
    &.field {
      background-color: @milk;
      color: @text-gray;
      display: flex;
      align-items: center;
    }
  }
  .ant-row:last-child {
    .cell {
      border-bottom: none;
    }
  }
  .ant-tag {
    background-color: @phase-default;
    border: none;
    padding: 1px 12px;
    font-size: 14px;
    .e-icon {
      color: @primary-color !important;
      cursor: pointer;
    }
  }
}
.person-item {
  border: 1px solid #e1e6f0;
  padding: 14px;
  display: flex;
  justify-content: space-between;
  .square {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-color: #e5eeff;
    line-height: 32px;
    text-align: center;
    color: @primary-color;
    margin-right: 14px;
  }
  .operations {
    line-height: 32px;
    color: @text-gray;
  }
}
</style>
<route lang="yaml">
name: Configuration
path: '/client/:id/configuration'
meta:
  sort: 70
  icon: Configuration
  permission: Configuration
</route>
